let btn = document.getElementById('add');
let inputs =document.querySelectorAll('input');
let list = document.querySelector('.bookList')
let modal =document.querySelector('.modal');
let close = document.querySelector('.closebtn');
let saveBtn = document.querySelector('savebtn');
let cteateBook;

inputs.forEach( input=> {
    input.addEventListener('focus',function(){
        this.setAttribute('data-placeholder', this.placeholder);
        this.placeholder='';
    })
    input.addEventListener('blur',function(){
        this.placeholder=this.getAttribute('data-placeholder');
    })
});

btn.addEventListener('click',function(){
    if(inputs[0].value=='')
        alert('书名不能为空');
        else if(inputs[1].value=='')
        alert('作者不能为空');
        else if(inputs[2].value=='')
        alert('出版年份不能为空');
        else{
            let book = document.createElement('div');
            book.classList.add('bookbox');
            
            let title =document.createElement('p');
            title.textContent=`书名:${inputs[0].value}`;
            book.appendChild(title);

            let author =document.createElement('p');
            author.textContent=`作者:${inputs[1].value}`;
            book.appendChild(author);

            let year =document.createElement('p');
            year.textContent=`出版年份:${inputs[2].value}`;
            book.appendChild(year);

            let create =document.createElement('button');
            create.textContent='修改';
            create.classList.add('createbox');
            create.addEventListener('click',function(){
                let modalname =document.getElementById('modalname');
                let modalauthor = document.getElementById('modalauthor');
                let modalyear=document.getElementById('modalyear');
                modalname.value= title.textContent.replace('书名:','');
                modalauthor.value= author.textContent.replace('作者:','');  
                modalyear.value= year.textContent.replace('出版年月:','');  
                modal.style.display='block';
            })
            book.appendChild(create);   

            list.appendChild(book);

            inputs.forEach(input => {
                input.value='';
            });
        }
})



